<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>购物车</title>
  <link rel="stylesheet" type="text/css" href="../css/main.css">
  <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
  <script type="text/javascript" src="../layui/layui.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>

  <div class="site-nav-bg">
    <div class="site-nav w1200">
      <ul class="layui-nav" style="text-align: right;">
      	<li class="layui-nav-item">
    		<a href="index.html">首页<span class="layui-badge-dot"></span></a>
  		</li>
  		<li class="layui-nav-item">
    		<a href="shopcart.html">购物车<span class="layui-badge">3</span></a>
  		</li>
  		<li class="layui-nav-item">
    	  <a href="http://127.0.0.1:8080/JackMa/frontPage/me.jsp"><img src="../images/me.JPG" class="layui-nav-img">我</a>
    	  <dl class="layui-nav-child">
	      	<dd><a href="javascript:;">修改信息</a></dd>
	      	<dd><a href="javascript:;">退出</a></dd>
    	  </dl>
  		</li>
	  </ul>
    </div>
  </div>


  <div class="header">
    <div class="headerLayout w1200">
      <div class="headerCon">
        <h1 class="mallLogo">
          <a href="index.html" title="">
            "Spend Jack Ma's Money"
          </a>
        </h1>
        <div class="mallSearch">
          <form action="" class="layui-form" novalidate>
            <input type="text" name="title" required  lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
            <button class="layui-btn" lay-submit lay-filter="formDemo">
                <i class="layui-icon layui-icon-search"></i>
            </button>
            <input type="hidden" name="" value="">
          </form>
        </div>
      </div>
    </div>
  </div>

  <div class="content content-nav-base shopcart-content">
    <div class="main-nav">
      <div class="inner-cont0">
        <div class="inner-cont1 w1200">
          <div class="inner-cont2">
            <a href="http://127.0.0.1:8080/JackMa/frontPage/commodity.jsp" class="active">所有商品</a>
            <a href="information.html">市场资讯</a>
            <a href="about.html">关于我们</a>
          </div>
        </div>
      </div>
    </div>
    
    <div class="fixed-float-money">
		<ul class="layui-nav layui-bg-green" style="text-align: center">
			<li class="layui-nav-item">
		    	<i name="left" id="left" class="layui-icon layui-icon-rmb" style="font-size: 30px; color: gold;">0</i>  
			</li>
		</ul>
    </div>
    
    
    <div class="cart w1200">
      <div class="cart-table-th">
        <div class="th th-chk">
          <div class="select-all">
            <div class="cart-checkbox">
              <input class="check-all check" id="allCheckked" type="checkbox" value="true">
            </div>
          <label>&nbsp;&nbsp;全选</label>
          </div>
        </div>
        <div class="th th-item">
          <div class="th-inner">
            商品
          </div>
        </div>
        <div class="th th-price">
          <div class="th-inner">
            单价
          </div>
        </div>
        <div class="th th-amount">
          <div class="th-inner">
            数量
          </div>
        </div>
        <div class="th th-sum">
          <div class="th-inner">
            小计
          </div>
        </div>
        <div class="th th-op">
          <div class="th-inner">
            操作
          </div>
        </div>  
      </div>
      <div class="OrderList">
        <div class="order-content" id="list-cont">
        </div>
      </div>

      <div class="FloatBarHolder layui-clear">
        <div class="th th-chk">
          <div class="select-all">
            <div class="cart-checkbox">
              <input class="check-all check" id="" name="select-all" type="checkbox"  value="true">
            </div>
            <label>&nbsp;&nbsp;已选<span class="Selected-pieces">0</span>件</label>
          </div>
        </div>
        <div class="th batch-deletion">
          <span class="batch-dele-btn">批量删除</span>
        </div>
        <div class="th Settlement">
          <button class="layui-btn">结算</button>
        </div>
        <div class="th total">
          <p>应付：<span class="pieces-total">0</span></p>
        </div>
      </div>
    </div>
  </div>

      <script type="text/html" id="demo">
        {{# layui.each(d.data,function(index,item){ }}
          <ul class="item-content layui-clear">
            <li class="th th-chk">
              <div class="select-all">
                <div class="cart-checkbox">
                  <input class="CheckBoxShop check" id="{{item.id}}" type="checkbox" num="all" name="select-all" value="true">
                </div>
              </div>
            </li>
            <li class="th th-item">
              <div class="item-cont">
                <a href="javascript:;"><img src="{{item.imgPath}}" alt="{{item.imgPath}}"></a>
                <div class="text">
                  <div class="title">{{item.title}}</div>
                  <p><span>{{item.info}}</span>
                </div>
              </div>
            </li>
            <li class="th th-price">
              <span class="th-su">{{item.price}}</span>
            </li>
            <li class="th th-amount">
              <div class="box-btn layui-clear">
                <div class="less layui-btn">-</div>
                <input class="Quantity-input" type="" name="" value="1" disabled="disabled">
                <div class="add layui-btn">+</div>
              </div>
            </li>
            <li class="th th-sum">
              <span class="sum">{{item.price}}</span>
            </li>
            <li class="th th-op">
              <span class="dele-btn">删除</span>
            </li>
          </ul>
        {{# }) }}
      </script>
<script type="text/javascript" src="../js/jquery-1.7.js"></script>
<script>
  layui.config({
    base: '../js/util/' //你存放新模块的目录，注意，不是layui的模块目录
  }).use(['mm','jquery','element','car'],function(){
    var mm = layui.mm,$ = layui.$,element = layui.element,car = layui.car;
    
    // 模版导入数据
    var html = document.getElementById('demo').innerHTML;
    var listCont = document.getElementById('list-cont');
     mm.request({
       url: 'http://127.0.0.1:8080/JackMa/action/goods/list',
       success : function(res){
         listCont.innerHTML = mm.renderHtml(html,res)
         element.render();
         car.init()
       },
       error: function(res){
         console.log(res);
    }
     }) 
    car.init();
	});
  
  $(function(){
      //获取要定位元素距离浏览器顶部的距离
      var navH = $(".fixed-float-money").offset().top;
      // console.log(navH);
      //滚动条事件
      $(window).scroll(function(){
          //获取滚动条的滑动距离
          var scroH = $(this).scrollTop();
          // console.log(scroH);
          //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
          if(scroH>=navH){
              $(".fixed-float-money").css({"position":"sticky","top":0});
          }else if(scroH<navH){
              $(".fixed-float-money").css({"position":"static"});
          }
       })
  });

  

</script>
</body>
</html>